<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if,v-show,v-for指令</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 这三个if必须连起来 中间不能有其他隔断 否则报错 -->
        <div v-if="show">hello world</div>
        <div v-else-if="show">hello world</div>
        <div v-else="show1">hello world</div>
        <div v-show="show2">hello worldX</div>
        <!-- 使用v-if时是直接把整个<div>给删除掉,
            而使用v-show时是给<div>里添加 style="display:none"
            当需要多次显示时用v-show性能更好，如果只需要几次显隐用v-if效果会好
        -->
        <button @click="handleClick">选我</button>

        <!-- v-for的作用是当你有一个数据需要做循环展示的时候，
            它会帮助你把这个数据循环展示成一个li 标签;v-for="(item,index) of list" :key="index"这个意思是把数据list的值给item、下标给index、
            然后在把index给键值：key “注意每个:key都是不同的”；当然是用index作为key值也不是特别好的选择，如果需要对列表进行频繁的变更的时候...
        -->
        <ul v-for="(item, index) of list" :key="index">
            <li>{{item}}</li>
        </ul>

        <hr>
        <!-- key可以表示唯一控件名，指定了key切换时 vue就不会使用空间的缓存，否则使用控件的缓存，控件数据不会清空 -->
        <div v-if="enableFlag">
            用户名：<input key="username" />
        </div>
        <div v-else>
            邮箱名：<input key="email" />
        </div>
        <button @click="changeHandle">转换输入框</button>
    </div>
    <script>
        new Vue({
            el : "#root" ,
            data : {
                show : true,
                enableFlag : true,
                list : [1,2,3]
            },
            methods : {
                handleClick : function(){
                    this.show = !this.show ;
                },
                changeHandle : function(){
                    this.enableFlag = !this.enableFlag
                }
            }
        })
    </script>
</body>
</html>